<template>
	<div class="back-color">
		<div class="text1 roll" v-if="myId=='理赔流程'" @click="a"><img class="my-img" :src="Img[0]" /> </div>
		<div class="text2 roll" v-if="myId=='承保理赔'"><img class="my-img" :src="Img[1]" /> </div>
		<div class="text3 roll" v-if="myId=='学习保险常识'"><img class="my-img" :src="Img[2]" /></div>
		<div class="text4 roll" v-if="myId=='购保维权'"><img class="my-img" :src="Img[3]" /></div>
		<div class="text5 roll" v-if="myId=='车险购买'"><img class="my-img" :src="Img[4]" /></div>
		<div class="question " v-if="myId=='车险理赔'">
			<div class="question-top">
				<div><img style="top: 0px;" class="question-img1" :src="cheImg[0]" /></div> 
				<div class="question-ab">
					<div class="f">
					<div class="font-text" style="margin: 0px 0px 11px 15px;color: #FFFFFF;">掌握这几条车险理赔更容易</div>
					<div class="question-id">
						<div>
						<div class="my-bo"><img :src="line" /> </div>	
						<div class="my-number">
							<div>
								<img class="nu" v-if="nn==1" :src="numImg[0]" />
								<img  v-else @click="select('1')"  class="nuT" :src="numImg[5]" />
							</div>
							
							<div>
								<img v-if="nn==2" class="nu" :src="numImg[1]"/>
								<img @click="select('2')" class="nuT" v-else   :src="numImg[6]" />
							</div>
							<div>
								<img v-if="nn==3" class="nu" :src="numImg[2]" />
								<img @click="select('3')" class="nuT"  v-else  :src="numImg[7]" />
							</div>
							<div>
								<img v-if="nn==4" class="nu" :src="numImg[3]" />
								<img @click="select('4')" class="nuT"  v-else  :src="numImg[8]" />
							</div>
							<div>
								<img v-if="nn==5" class="nu" :src="numImg[4]" />
								<img @click="select('5')" class="nuT"  v-else   :src="numImg[9]" />
							</div>
						</div>
						</div>
						<div class="number-text">
							<div class="question-re"><div class="size">出险</div><img v-if="nn==1" class="t" :src="jiao"/> </div>
							<div class="question-re"><div class="size">查勘</div><img v-if="nn==2" class="t" :src="jiao" /> </div>
							<div class="question-re"><div class="size">定责</div><img v-if="nn==3" class="t" :src="jiao" /> </div>
							<div class="question-re"><div class="size">定损</div><img v-if="nn==4" class="t" :src="jiao" /> </div>
							<div class="question-re"><div class="size">理赔</div><img v-if="nn==5" class="t" :src="jiao" /> </div>
						</div>
					</div>
					</div>
					<div class="question-text">
						<div v-if="nn==1"><img class="question-img2" :src="cheImg[1]"/> </div>
						<div v-if="nn==2"><img class="question-img3" :src="cheImg[2]" /></div>
						<div v-if="nn==3"><img class="question-img4" :src="cheImg[3]" /></div>
						<div v-if="nn==4"><img class="question-img5" :src="cheImg[4]" /></div>
						<div v-if="nn==5"><img class="question-img6" :src="cheImg[5]" /></div>
					</div>
				</div>
			</div>
		</div>
		<div class="guide " v-if="myId=='承保指南'">
			<div class="guide-top">
				<div><img class="guide-img1" :src="guide[0]" /></div> 				
				<div class="ab">
					<div class="ff">
						<div class="font-text" style="margin: 0px 0px 11px 15px;color: #FFFFFF;">保险专家带你读懂承保问题</div>
						<div class="guide-id">
							<div style="position: relative;">
							<div class="my-border"><img style="width: 72%;height: 1px;" :src="line" /> </div>	
							<div class="my-num">
								<div><img class="num" v-if="num==false" :src="numImg[0]" /><img v-else  @click="sel"  class="numT" :src="numImg[5]" /> </div>
								
								<div><img @click="sel" class="numT" v-if="num==false"  :src="numImg[6]" /><img v-else class="num" :src="numImg[1]" /> </div>
							</div>
							</div>
							<div class="num-text">
								<div class="re"><div> 承保材料</div><img v-if="num==false" class="jiao" :src="jiao" /> </div>
								<div class="re"><div>承保流程</div><img v-if="num==true" class="jiao" :src="jiao"/> </div>
							</div>
						</div>
					</div>
					<div class="guide-text">
						<img v-if="num==false" class="guide-img3":src="guide[1]"/> 
						<img v-else  class="guide-img2" :src="guide[2]" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import '../../style/reservaIndex_index.css';
	import 'vant/lib/button/style';
	import 'vant/lib/dialog/style';
	import { Button,Dialog  } from 'vant';
	import { Component, Vue, Prop } from 'vue-property-decorator';
	import { cloudApi } from '@/api/indexApi';
	import VueLazyLoad from 'vue-lazyload'
	@Component({
	  components: {
	    [Button.name]: Button,
	    [Dialog.name]: Dialog,
	  },
	})
	export default class MainPage extends Vue {
		myId:any='';
		num:any=false;
		active:any=false;
		Show1:any=false;
		Show2:any=false;
		Show3:any=false;
		Show4:any=false;
		Show5:any=false;
		nn:any=1;
		Img:any=[
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/lipeifuwu.jpg',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/chengbao_zizhu.jpg',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/baoxianjichu.jpg',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/xiaofeitousu.jpg',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/buy.png'			
		];
		cheImg:any=[
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/question1.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/chuXian.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/question3.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/question4.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/question5.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/question6.png'
		];
		guide:any=[
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/guide1.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/guide3.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/guide2.png'
		];
		numImg:any=[
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/num1.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/num2.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/num3.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/num4.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/num5.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/numOne.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/numTwo.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/numThree.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/numFour.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/numFive.png',
		];
		jiao:any='https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/jiao.png';
		line:any='https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/line.png';
		created(){
			this.myId=this.$route.query.id
			console.log('111111',this.myId)
			console.log('this.$router.query',this.$route.query)
			document.title = '保险知识'

		}
		a(){
			console.log(11111)
		}
		sel(){
			this.num=!this.num
		}
		select(e){
			this.nn=e
		}
	}
	
</script>

<style lang="less" scoped>
	.back-color{
		height: 100%;
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		background: #F6F7FB;
	}
	.roll{
		width: 100%;
		overflow-x: hidden;
	}
	.text1{
		width: 375px;
	}
	.my-img{
		width: 100%;
		height: 100%;
	}
	.guide{
		position: relative;
	}
	.guide-top{
		position: relative;
	}
	.ab{
		position: absolute;
		top: 0px;
	}
	.ff{
		position: sticky;
		top: 0px;
		background: linear-gradient(to bottom,#00CCAA,#6edfcd);
		// background-color:  #93e0d1;
		padding-bottom: 10px;
		padding-top: 15px;
	}
	.f{
		position: sticky;
		top: 0px;
		// #69d5bb
		background: linear-gradient(to bottom,#00CCAA,#0FD3B7);
		background-color:  #68d3b7;
		padding-bottom: 10px;
		padding-top: 15px;
	}
	.font-text{
		font-family: YouSheBiaoTiHei;
		font-style: italic;
		font-size: 24px;
		font-weight: bolder;
	}
	.guide-id{
		background-color: white;
		height: 90px;
		margin: 0px 11px;
		position: sticky;
		top: 0px;
		border-radius: 5px;
	}
	.my-border{
		// border-top:1px dotted  #08c29f;
		width: 152px;
		padding-top: 14px;
		margin: 0px 74px;
		position: absolute;
		z-index: -99;
		top: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 46px;
		width: 72%;
	}
	.my-num{
		padding-top: 14px;
		display: flex;
		// justify-content: center;
		align-items: center;
		margin: 0px 74px;
		justify-content: space-between;
	}
	.num-text{
		font-size: 16px;
		display: flex;
		// justify-content: space-around;
		height: 20px;
		line-height: 20px;
		margin-top: 1px;
		margin: 0px 57px;
		justify-content: space-between;
	}
	.number-text{
		font-size: 16px;
		display: flex;
		justify-content: space-around;
		height: 20px;
		line-height: 20px;
		margin-top: 1px;
		// margin: 0px 57px;
		// justify-content: space-between;
	}
	.size{
		height: 20px;
		line-height: 20px;
		margin-bottom: -4px;
	}
	.re{
		position: relative;
	}
	.jiao{
		position: absolute;
		margin-top: 7px;
		left: 28px;
		width: 7px;
		height: 6px;
	}
	.guide-text{
		margin: 0px 11px 52px 11px;
	}
	.num{
		width: 30px;
		height: 30px;
	}
	.numT{
		width: 24px;
		width: 24px;
	}
	.guide-img1{
		width: 375px;
		height: 287px;
	}
	.guide-img2{
		width: 353px;
		height: 1244px;
	}
	.guide-img3{
		width: 353px;
		height: 1957px;
	}
	.question{
		// overflow: auto;
		position: relative;
	}
	.question-top{
		// background-image: url(../../assets/images/insurance/question1.png);
		// position: relative;
	}
	.question-ab{
		position: absolute;
		top: 0px;
		width: 100%;
	}
	.question-id{
		background-color: white;
		height: 75px;
		margin: 0px 11px;
		position: sticky;
		top: 48px;
		border-radius: 5px;
	}
	.nu{
		z-index: 9;
		width: 30px;
		height: 30px;
	}
	.nuT{
		z-index: 9;
		width: 25px;
		height: 25px;
	}
	.my-number{
		// background-position: 25px 26px;
		// background-size: auto;
		// background-repeat: no-repeat;
		// background: url(../../assets/images/insurance/line.png);
		padding-top: 6.5px;
		display: flex;
		margin: 0px 22px;
		justify-content: space-between;
		align-items: center;
	}
	.question-re{
		text-align: center;
	}
	.t{
		width: 7px ;
		height: 6px;
	}
	.my-bo{
		position: absolute;
		z-index: -99;
		top: 0px;
		padding-top: 6.5px;
		display: flex;
		margin: 0 0.586667rem;
		justify-content: space-between;
		align-items: center;
		height: 39px;
		width: 100%;
		img{
			width: 300px;
			width: 86%;
		}
	}
	.question-text{
		margin: 0px 11px 41px 11px;
	}
	.question-img1{
		width: 375px;
		height: 362px;
	}
	.question-img2{
		width: 100%;
	}
	.question-img3{
		width: 100%;
	}
	.question-img4{
		width: 365px;
	}
	.question-img5{
		width: 100%;
	}
	.question-img6{
		width: 100%;
	}
</style>
